<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星辰运势 - AI星座运势生成器</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6a5acd;
            --secondary: #9370db;
            --light: #e6e6fa;
            --dark: #483d8b;
            --text: #333;
            --highlight: #ffd700;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'ZCOOL QingKe HuangYou', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: var(--light);
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            animation: fadeIn 1s ease-in-out;
        }
        
        h1 {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 3rem;
            color: var(--highlight);
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.8;
        }
        
        .generator-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            margin-bottom: 30px;
            animation: slideUp 0.8s ease-out;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-size: 1.1rem;
            color: var(--highlight);
        }
        
        select, input, textarea {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.9);
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        select:focus, input:focus, textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.5);
            background: white;
        }
        
        button {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(106, 90, 205, 0.6);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        .result-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            margin-top: 30px;
            display: none;
            animation: fadeIn 0.8s ease-out;
        }
        
        .result-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 15px;
        }
        
        .zodiac-icon {
            width: 60px;
            height: 60px;
            margin-right: 20px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        
        .result-title {
            font-size: 1.8rem;
            color: var(--highlight);
        }
        
        .result-date {
            opacity: 0.8;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        
        .result-content {
            font-size: 1.1rem;
            line-height: 1.8;
            white-space: pre-wrap;
        }
        
        .share-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        .share-button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 15px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .share-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            opacity: 0.7;
            font-size: 0.9rem;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .generator-container, .result-container {
                padding: 20px;
            }
            
            .zodiac-icon {
                width: 50px;
                height: 50px;
            }
            
            .result-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>星辰运势</h1>
            <p class="subtitle">AI星座运势生成器 - 探索你的星辰指引</p>
        </header>
        
        <div class="generator-container">
            <div class="form-group">
                <label for="zodiac-sign">选择你的星座</label>
                <select id="zodiac-sign">
                    <option value="">-- 请选择你的星座 --</option>
                    <option value="白羊座">白羊座 (3月21日-4月19日)</option>
                    <option value="金牛座">金牛座 (4月20日-5月20日)</option>
                    <option value="双子座">双子座 (5月21日-6月21日)</option>
                    <option value="巨蟹座">巨蟹座 (6月22日-7月22日)</option>
                    <option value="狮子座">狮子座 (7月23日-8月22日)</option>
                    <option value="处女座">处女座 (8月23日-9月22日)</option>
                    <option value="天秤座">天秤座 (9月23日-10月23日)</option>
                    <option value="天蝎座">天蝎座 (10月24日-11月22日)</option>
                    <option value="射手座">射手座 (11月23日-12月21日)</option>
                    <option value="摩羯座">摩羯座 (12月22日-1月19日)</option>
                    <option value="水瓶座">水瓶座 (1月20日-2月18日)</option>
                    <option value="双鱼座">双鱼座 (2月19日-3月20日)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="birth-date">出生日期 (可选)</label>
                <input type="date" id="birth-date">
            </div>
            
            <div class="form-group">
                <label for="question">特别想问的问题或关注的领域 (可选)</label>
                <textarea id="question" rows="3" placeholder="例如: 爱情、事业、财运、健康..."></textarea>
            </div>
            
            <button id="generate-btn">
                <span class="loading" style="display: none;"></span>
                <span>生成我的星座运势</span>
            </button>
        </div>
        
        <div class="result-container" id="result-container">
            <div class="result-header">
                <div class="zodiac-icon" id="zodiac-icon"></div>
                <div>
                    <h2 class="result-title" id="result-title"></h2>
                    <div class="result-date" id="result-date"></div>
                </div>
            </div>
            <div class="result-content" id="result-content"></div>
            
            <div class="share-buttons">
                <div class="share-button" onclick="shareOnWeibo()">
                    <span>分享到微博</span>
                </div>
                <div class="share-button" onclick="shareOnWeChat()">
                    <span>分享到微信</span>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2025 星辰运势</p>
        </footer>
    </div>

    <script>
        document.getElementById('generate-btn').addEventListener('click', generateHoroscope);
        
        async function generateHoroscope() {
            const zodiacSign = document.getElementById('zodiac-sign').value;
            const birthDate = document.getElementById('birth-date').value;
            const question = document.getElementById('question').value;
            
            if (!zodiacSign) {
                alert('请选择你的星座');
                return;
            }
            
            const btn = document.getElementById('generate-btn');
            const loading = btn.querySelector('.loading');
            btn.disabled = true;
            loading.style.display = 'inline-block';
            
            try {
                // 这里替换为你的DeepSeek API调用
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer sk-c6a7fb0a88f04c45a858716ce9aec15c'
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat",
                        messages: [
                            {
                                role: "system",
                                content: "你是一位专业的占星师，能够根据星座和用户提供的信息生成详细、个性化的星座运势分析。"
                            },
                            {
                                role: "user",
                                content: `请为${zodiacSign}生成今天的星座运势分析。${birthDate ? '出生日期：' + birthDate : ''} ${question ? '特别关注：' + question : ''}`
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 1000
                    })
                });
                
                if (!response.ok) {
                    throw new Error('API请求失败');
                }
                
                const data = await response.json();
                const horoscope = data.choices[0].message.content;
                
                // 显示结果
                document.getElementById('result-title').textContent = `${zodiacSign}今日运势`;
                document.getElementById('result-date').textContent = new Date().toLocaleDateString('zh-CN', { 
                    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' 
                });
                document.getElementById('result-content').textContent = horoscope;
                document.getElementById('result-container').style.display = 'block';
                
                // 滚动到结果
                document.getElementById('result-container').scrollIntoView({ behavior: 'smooth' });
                
            } catch (error) {
                console.error('生成运势出错:', error);
                alert('生成运势时出错，请稍后再试');
            } finally {
                btn.disabled = false;
                loading.style.display = 'none';
            }
        }
        
        function shareOnWeibo() {
            const text = `${document.getElementById('result-title').textContent}\n\n${document.getElementById('result-content').textContent}`;
            const url = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(window.location.href)}&title=${encodeURIComponent(text)}`;
            window.open(url, '_blank', 'width=550,height=420');
        }
        
        function shareOnWeChat() {
            alert('请使用微信扫描屏幕截图分享给你的朋友');
        }
    </script>
</body>
</html>